<template>
  <div class="setting-container">
       <!-- 导航栏 -->
    <van-nav-bar
    title="编辑资料"
    left-text="返回"
    left-arrow
    @click-left='$router.back()'
    />
    <div class="info_cell">
     <van-cell-group title="更多">
          <van-cell title="密码修改" value="修改密码" size="large" is-link @click="editPasswd"/>
          <van-cell title="账号注销" value="注销账号" size="large" is-link @click="cancelUser"/>

        </van-cell-group>
        <div class="footer">
          <van-button type="danger" @click="logout" >退出登录</van-button>
        </div>
    </div>
    <!-- 修改密码弹层   start -->
  <van-dialog v-model="showPasswdDialog" title="修改密码" :showConfirmButton='false'  >
    <van-form  ref="passVlidate" validate-trigger="onSubmit">
    <van-field
    v-model="password.pw1"
    type="password"
    name="密码"
    label="修改密码"
    placeholder="请输入密码"
    :rules="[{ required: true, message: '密码不能为空' }]"
  />
  <van-field
    v-model="password.pw2"
    type="password"
    name="密码"
    label="确认密码"
    placeholder="请再次确认密码"
    :rules="[{ required: true, message: '密码不能为空' }]"
  />
   <div class="formBtn">
    <van-button type="info" native-type="submit" block round>提交</van-button>
    <van-button plain type="info" block round @click="cancel">取消</van-button>
  </div>
</van-form>
  </van-dialog>
    <!-- 修改密码弹层   end -->
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { delUser } from '@/api/user'
export default {
  name: 'setting',
  data () {
    return {
      showPasswdDialog: false,
      password: {
        pw1: null,
        pw2: null
      }
    }
  },
  methods: {
    cancel () {
      this.password.pw1 = ''
      this.password.pw2 = ''
      this.$refs.passVlidate.resetValidation()
      this.showPasswdDialog = false
    },
    editPasswd () {
      this.showPasswdDialog = true
    },
    cancelUser () {
      // 注销账号
      Dialog.confirm({
        title: '账号注销',
        message: '确定注销该账号吗？'
      })
        .then(async () => {
          await delUser()
          this.$router.push('/login')
          this.$store.commit('user/logout')
        })
        .catch(() => {
          console.log('取消注销该账号')
        })
    },
    logout () {
      // 退出账号
      Dialog.confirm({
        title: '退出账号',
        message: '确定退出账号该账号吗？'
      })
        .then(() => {
          this.$store.commit('user/logout')
          this.$router.push('/login')
        })
        .catch(() => {
          console.log('取消执行这里')
        })
    }
  }
}
</script>

<style scoped lang="less">
.footer{
  text-align: center;
  button{
    // border: none;
    width: 70%;
  }
}
.formBtn{
  display: flex;
  justify-content:space-around;
  margin: 35px;
  button{
    width: 40%;
  }
}

</style>
